<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="header flex-justify-between">
        <div class="bnts flex-align-center">
          <button class="btn btn-bg2 ml5">添加产品</button>
          <button class="btn btn-bg2 ml5">导入产品</button>
          <button class="btn btn-bg1 ml5">导出产品</button>
          <button class="btn btn-bg5 ml5">回收站</button>
        </div>
        <div class="search flex-align-center">
          <el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-input v-model="input" placeholder="检索" class="input-with-select">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData" @selection-change="handleChange">
          <el-table-column show-overflow-tooltip type="selection" width="50" />
          <el-table-column show-overflow-tooltip prop="name,img" label="产品型号" min-width="200">
            <template #default="scope">
              <div class="brand_list flex-justify-between">
                <div>
                  <span>{{ scope.row.name }}</span>
                </div>
                <el-popover placement="right" :width="180" trigger="hover">
                  <el-image style="height: 120px" :src="scope.row.img" fit="contain"> </el-image>
                  <template #reference>
                    <el-icon size="24px">
                      <PictureFilled />
                    </el-icon>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="date" label="产品货号" width="200" />
          <el-table-column show-overflow-tooltip prop="coderNub" label="产品分类" width="150" />
          <el-table-column show-overflow-tooltip prop="count" label="品牌" width="150 " />
          <el-table-column show-overflow-tooltip prop="city" label="编码数量" width="100" />
          <el-table-column show-overflow-tooltip prop="count" label="登记数量" width="100" />
          <el-table-column show-overflow-tooltip prop="city" label="最后更新时间" width="170" />
          <el-table-column prop="state" label="产品状态" width="90">
            <template #default="scope">
              <div class="state">
                <span :class="scope.row.state == '启用' ? 'state1' : ''">
                  {{ scope.row.state }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
              <div class="btns flex-justify-between">
                <button class="btn-table bgColor4" @click="toCodelist(scope.$index)">编码</button>
                <button class="btn-table bgColor3">防伪</button>
                <button class="btn-table bgColor1" @click="toOrderlist(scope.$index)">工单</button>
                <button class="btn-table bgColor2">详细</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer flex-justify-between">
        <div class="btns flex-justify-between">
          <button class="btn mr5" @click="enableAll">批量启用</button>
          <button class="btn mr5" @click="disableAll">批量禁用</button>
          <button class="btn mr5" @click="deleteAll">批量删除</button>
        </div>
        <div class="pagina"> <Pagination /></div>
      </div>

      <!-- <iframe src="../brand/index.vue" frameborder="0"></iframe> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.goodManagerSet,
  })

  const router = useRouter()
  const input = ref('')
  const value = ref('')

  // 查看编码
  const toCodelist = (n: number) => {
    // router.push({ path: '/order/odetail', query: { name: JSON.parse(tableData[n].name) } })
    router.push('/code/list')
  }

  // 查看工单
  const toOrderlist = (n: number) => {
    router.push('/order/list')
  }

  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val) => {
    if (val.length != 0) {
      val.forEach((item) => {
        if (Object.values(selecttion.value).indexOf(item.name) == -1) {
          selecttion.value.push(item.name)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.name)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 批量启用
  const enableAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请勾选需要批量操作的数据',
        type: 'warning',
      })
      return
    }
    ElMessageBox.confirm('您确定要启用勾选的这几条数据吗?', '提示', {
      draggable: true,
      cancelButtonText: '取消',
      confirmButtonText: '确定',
    })
      .then(() => {
        ElMessage({
          message: '启用成功',
          type: 'success',
        })
      })
      .catch(() => {})
  }

  // 批量禁用
  const disableAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请勾选需要批量操作的数据',
        type: 'warning',
      })
      return
    }
    ElMessageBox.confirm('您确定要禁用勾选的这几条数据吗?', '提示', {
      draggable: true,
      cancelButtonText: '取消',
      confirmButtonText: '确定',
    })
      .then(() => {
        ElMessage({
          message: '禁用成功',
          type: 'success',
        })
      })
      .catch(() => {})
  }

  // 批量删除
  const deleteAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: '请勾选需要批量操作的数据',
        type: 'warning',
      })
      return
    }
    ElMessageBox.confirm('您确定要删除勾选的这几条数据吗?', '提示', {
      draggable: true,
      cancelButtonText: '取消',
      confirmButtonText: '确定',
    })
      .then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      })
      .catch(() => {})
  }

  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]

  const tableData = [
    {
      date: 'LS23050905092127718284',
      name: 'IN2306091736308883',
      coderNub: '233',
      count: '0',
      city: '深圳市南山区维修店',
      address: '2023-04-26 11:31:01',
      zip: 'CA 90036',
      tag: 'Home',
      state: '启用',
    },
    {
      date: '20230602590500824',
      state: '不启用',
      name: '2016-05-02',
      count: '0',
      coderNub: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      count: '0',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      count: '0',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
